import React, { Component } from 'react'
import { Tooltip, Input, Button, message, Empty, Pagination } from 'antd';
import styles from './index.less';
import { history } from 'umi'
import { StarFilled } from '@ant-design/icons';
import { getCollectCourseware, collectCourseware } from '@/services/learnStudent'
import { fileurl} from '@/services/baseurl'
function againGroup(data: any, num: number) {
    const result = [];
    for (let i = 0, len = data.length; i < len; i += num) {
        result.push(data.slice(i, i + num));
    }
    return result;

}
export default class Collect extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            list: [],
            name: '',
            count: 1,
            currentPage:0,
        }
    }

    collectHandle = (e: any, item: any) => {
        const uid = localStorage.getItem('id') || '';
        e.nativeEvent.stopImmediatePropagation()
        e.stopPropagation();
        collectCourseware({ collect: item.id, uid }).then(res => {
            if (res.status === 1) {
                message.success('操作成功')
                this.renderList()
            } else {
                message.error('操作失败')
            }
        })
    }
    openFile = (item: any) => () => {
        localStorage.setItem('doc', item.doc)
        history.push('/file/' + item.id+'/'+(item.is_jc||0))
    }
    renderList = () => {
        const { name } = this.state;
        const uid = localStorage.getItem('id') || '';
        getCollectCourseware({ uid, name }).then(res => {
            const arr = [];
             if(!res.collects)return;
            for (let i = 0; i < res.collects.length; i++) {
                const item = res.collects[i];
                if(item){
                    arr.push(item)
                }
            }
            this.setState({
                list:againGroup(arr, 6),
                count:arr.length||1
            })
        })
    }
    changeName = (e: any) => {
        this.setState({
            name: e.target.value
        })
    }
    searchHandle = () => {
        this.renderList()
    }
    componentDidMount() {
        this.renderList()
    }
    changePage=(e)=>{
        this.setState({
            currentPage:e-1
        })
    }
    render() {

        const { list, count ,currentPage} = this.state;
        return (
            <React.Fragment>
                <div className={styles['search-area']}>
                    <Button type="primary" style={{ float: 'right' }} onClick={this.searchHandle}>搜索</Button>
                    <Input style={{ width: 200, marginRight: 10, float: 'right' }} placeholder="请输入搜索内容" onChange={this.changeName}></Input>
                </div>
                <div className={styles['collect-cards-container']}>
                    {list[currentPage] ? list[currentPage].map((item:any) => {
                        return item && <div key={item.id} className={styles['collect-cards']} onClick={this.openFile(item)}>
                            <img src={fileurl(item.is_jc) + item.cover} alt="" />
                            <div>
                                <div >
                                    <h4>{item.name}</h4>
                                    <p>编辑日期：{item.created_at}</p>
                                </div>
                                <Tooltip title='取消收藏'><StarFilled onClick={(e) => this.collectHandle(e, item)} style={{ color: "#f60" }} className={styles['courseware-cards-collect']} /></Tooltip>
                            </div>
                        </div>
                    }) : <Empty />
                    }
                </div>
                <Pagination style={{ float: 'right' }} onChange={this.changePage} showQuickJumper total={count} pageSize={6} showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`} />

            </React.Fragment>
        )
    }
}
